<template>
    <view class="page flex-col">
        <view class="section_2 flex-col">
            <text class="text_4">作业信息</text>
            <view class="section_3 flex-col">
                <view class="text-wrapper_2 flex-row">
                    <text class="text_5">姓名：</text>
                    <text class="text_6">{{ reportData.student_name_from_user }}</text>
                </view>
                <view class="text-wrapper_3 flex-row">
                    <text class="text_7">班级：</text>
                    <text class="text_8">{{ reportData.class_name }}</text>
                </view>
                <view class="text-wrapper_4 flex-row">
                    <text class="text_9">学号：</text>
                    <text class="text_10">{{ reportData.student_no }}</text>
                </view>
                <view class="text-wrapper_5 flex-row">
                    <text class="text_11">学院：</text>
                    <text class="text_12">{{ reportData.college }}</text>
                </view>
                <view class="text-wrapper_6 flex-row">
                    <text class="text_13">专业：</text>
                    <text class="text_14">{{ reportData.major }}</text>
                </view>
                <view class="text-wrapper_7 flex-row">
                    <text class="text_15">实验名称：</text>
                    <text class="text_16">{{ name }}</text>
                </view>
                <view class="text-wrapper_8 flex-row">
                    <text class="text_17">实验日期：</text>
                    <text class="text_18">{{
                        reportData.updated
                        }}</text>
                </view>
                <view class="text-wrapper_9 flex-row">
                    <text class="text_19">
                        组&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
                    </text>
                    <text class="text_20">{{ reportData.group_no }}</text>
                </view>
            </view>
        </view>
        <view class="section_4 flex-row" v-if="reportData.report_file_list && reportData.report_file_list.length > 0">
            <view class="image-text_1 flex-row justify-between">
                <image class="label_1" referrerpolicy="no-referrer"
                    src="./img/icon-file.png" />
                <view class="text-group_1 flex-col">
                    <text class="text_21">{{ reportData.report_file_list[reportData.report_file_list.length - 1].file_name }}</text>
                    <text class="text_22">{{ reportData.report_file_list[reportData.report_file_list.length - 1].created }}</text>
                </view>
            </view>
        </view>
        <view class="section_5 flex-col">
            <view class="group_1 flex-row justify-between">
                <view class="box_3 flex-col"></view>
                <text class="text_23">实验目的</text>
            </view>
            <view class="text-wrapper_10 flex-row">
                <view class="text_24" v-html="reportData.objective">
                </view>
            </view>
            <view class="group_2 flex-row justify-between">
                <view class="box_4 flex-col"></view>
                <text class="text_25">实验仪器和素材</text>
            </view>
            <view class="text-wrapper_11 flex-row">
                <view class="text_26" v-html="reportData.instrument_equipment">
                </view>
            </view>
            <view class="group_3 flex-row justify-between">
                <view class="box_5 flex-col"></view>
                <text class="text_27">实验原理</text>
            </view>
            <view class="text-wrapper_12 flex-row">
                <view class="text_28" v-html="reportData.principle">
                </view>
            </view>
        </view>
        <view class="section_6 flex-col">
            <text class="text_29">作业得分</text>
            <view class="text-wrapper_13 flex-col">

                <input v-if="!detail" class="text_30" v-model="finnal_score" placeholder="请输入作业得分" />
                <text v-else class="text_30">{{ reportData.report_score.finnal_score }}</text>
            </view>
            <view class="box_6 flex-col">
                <view class="text-wrapper_14 flex-row justify-between">
                    <text class="text_31">作业简评</text>
                    <text v-if="!detail" class="text_32">{{ tipStr }}</text>
                </view>
                <view class="text-wrapper_15 flex-col">
                    <textarea v-if="!detail" class="text_33" v-model="brief" @input="bindTextAreaInput(brief)"
                        placeholder="请输入作业简评" maxlength="500" />
                    <text v-else class="text_33">{{ reportData.report_score.brief }}</text>

                </view>
            </view>
        </view>
        <view class="section_7 flex-col">
            <view class="block_1 flex-row">
                <view class="box_7 flex-row" @click="goBack">
                    <view class="image-text_2 flex-row justify-between">
                        <image class="thumbnail_5" referrerpolicy="no-referrer"
                            src="../img/left-arrow.png" />
                        <text class="text-group_2">返回</text>
                    </view>
                </view>
                <view v-if="reportData.student_experiment_id" class="text-wrapper_16 flex-col" @click="toggle">
                    <text class="text_34">下载报告</text>
                </view>
                <view v-if="!detail" class="text-wrapper_17 flex-col" @click="handleRate">
                    <text class="text_35">完成评分</text>
                </view>
            </view>
        </view>
        <!-- <view style="height: 126rpx;">

        </view> -->
        <!-- 普通弹窗 -->
        <uni-popup ref="popup" class="my-popup" type="bottom" background-color="#fff" borderRadius="12px 12px 0px 0px">
            <view class="popup-content">
                <view class="group_5 flex-col">
                    <view class="box_9 flex-row justify-between">
                        <text class="text_12">选择下载格式</text>
                        <image @click="closePop" class="thumbnail_7" referrerpolicy="no-referrer"
                            src="./img/close.png" />
                    </view>
                    <view class="section_2 flex-row justify-between" v-for="(item, index) in options" :key="index"
                        @click="change(item)">
                        <text class="text_13" :class="{ 'active': selOpt == item.value }">{{ item.label }}</text>
                        <image v-if="selOpt == item.value" class="thumbnail_13" referrerpolicy="no-referrer"
                            src="./img/check.png" />
                    </view>
                    <view class="text-wrapper_9 flex-col" @click="confirmSel">
                        <text class="text_17">下载</text>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
import API from "@/api/teacherapi";
  import {baseUrl} from "../../../config";
export default {
    data() {
        return {
            showButtom:true,
            reportData: {},
            report_id: '',
            name: '',
            finnal_score: '',
            brief: '',
            tipStr: '0/500',
            detail: '',
            options: [{
                "value": 1,
                "label": "PDF",
                "tag": "",
                "text": "PDF"
            }, {
                "value": 2,
                "label": "WORD",
                "tag": "",
                "text": "WORD"
            },],
            selOpt: null,
            baseUrl: baseUrl,
        };
    },
    async onLoad(option) {
        this.report_id = option.report_id
        this.detail = option.detail
        this.name = option.name
        this.getData();
    },
    methods: {
        toggle() {
            console.log('this.$refs.popup', this.$refs.popup)
            this.$refs.popup.open()
        },
        closePop() {
            this.$refs.popup.close()
        },
        change(item) {
            this.selOpt = item.value
        },
        confirmSel() {
            this.closePop()
            this.handleDownLoad()
        },
        handleDownLoad() {
            if (this.selOpt == 1) {
                uni.downloadFile({
                    url: `${this.baseUrl}/api/StudentExperiment/PdfForStudentExperiment?student_experiment_id=${this.reportData.student_experiment_id}`, //仅为示例，并非真实的资源
                    success: (res) => {
                        if (res.statusCode === 200) {
                            var filePath = res.tempFilePath;
                            uni.openDocument({
                                filePath: filePath,
                                showMenu: true,
                                success: function (res) {
                                    console.log('打开文档成功');
                                }
                            });
                        }
                    }
                });
            } else if (this.selOpt == 2) {
                uni.downloadFile({
                    url: `${this.baseUrl}/api/StudentExperiment/WordForStudentExperiment?student_experiment_id=${this.reportData.student_experiment_id}`, //仅为示例，并非真实的资源
                    success: (res) => {
                        if (res.statusCode === 200) {
                            var filePath = res.tempFilePath;
                            uni.openDocument({
                                filePath: filePath,
                                showMenu: true,
                                success: function (res) {
                                    console.log('打开文档成功');
                                },
                            });
                        }
                    }
                });
            } else {
                uni.showToast({
                    title: '请选择下载格式',
                    icon: "none",
                });
            }
        },
        bindTextAreaInput(item) {
            this.tipStr = item.length + '/' + this.tipStr.split('/')[1]
        },
        async getData() {
            const res = await API.ReportFetchModel({
                report_id: this.report_id,
            })
            this.reportData = res;
            console.log(res);
        },
        goBack() {
            uni.navigateBack({
                delta: 1
            });
        },
        async handleRate() {
            if (!this.finnal_score) {
                uni.showToast({
                    title: '请输入作业得分',
                    icon: 'none'
                })
                return
            }
            if (!this.brief) {
                uni.showToast({
                    title: '请输入作业简评',
                    icon: 'none'
                })
                return
            }
            let params = {
                report_id: this.reportData.report_id,
                user_id: this.reportData.user_id,
                finnal_score: this.finnal_score,
                brief: this.brief
            };
            await API.ReportScoreCreate(params);
            uni.showToast({
                title: '评分成功',
                icon: 'success'
            })
            this.goBack()
        },
    },

};
</script>
<style lang="less" scoped>
.my-popup {
    z-index: 999 !important;
}

.popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px 12px 0px 0px;

    .group_5 {
        background-color: rgba(255, 255, 255, 1);
        padding: 44rpx 48rpx 18rpx 48rpx;
    }

    .box_9 {
        width: 654rpx;
    }

    .text_12 {
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 36rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 50rpx;
    }

    .thumbnail_7 {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 10rpx;
    }

    .section_2 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        width: 654rpx;
        margin-top: 32rpx;
        padding: 36rpx 0 40rpx 0;
    }

    .text_13 {
        overflow-wrap: break-word;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 1);
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 52rpx;

        &.active {
            color: rgba(39, 118, 255, 1);
        }
    }

    .thumbnail_13 {
        width: 40rpx;
        height: 40rpx;
        margin: 8rpx 0 4rpx 0;
    }

    .text-wrapper_6 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 36rpx 462rpx 40rpx 0;
    }

    .text_14 {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 32rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 52rpx;
    }

    .text-wrapper_7 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 36rpx 430rpx 40rpx 0;
    }

    .text_15 {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 32rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 52rpx;
    }

    .text-wrapper_8 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 36rpx 462rpx 40rpx 0;
    }

    .text_16 {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 32rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 52rpx;
    }

    .text-wrapper_9 {
        background-color: rgba(39, 118, 255, 1);
        border-radius: 6px;
        margin: 80rpx 8rpx 0 10rpx;
        padding: 22rpx 284rpx 22rpx 284rpx;
    }

    .text_17 {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 34rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: right;
        white-space: nowrap;
        line-height: 48rpx;
    }
}

.page {
    background-color: rgba(248, 248, 248, 1);
    position: relative;
    width: 750rpx;

    .section_2 {
        background-color: rgba(255, 255, 255, 1);
        margin-top: 24rpx;
        padding: 24rpx 32rpx 32rpx 32rpx;

        .text_4 {
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 28rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
            margin-right: 574rpx;
        }

        .section_3 {
            background-color: rgba(247, 247, 247, 1);
            border-radius: 8px;
            margin-top: 24rpx;
            padding: 24rpx 186rpx 24rpx 24rpx;

            .text-wrapper_2 {
                width: 140rpx;
                margin-right: 336rpx;

                .text_5 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_6 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_3 {
                width: 174rpx;
                margin: 12rpx 302rpx 0 0;

                .text_7 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_8 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_4 {
                width: 214rpx;
                margin: 12rpx 262rpx 0 0;

                .text_9 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_10 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_5 {
                width: 336rpx;
                margin: 12rpx 140rpx 0 0;

                .text_11 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_12 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_6 {
                width: 168rpx;
                margin: 12rpx 308rpx 0 0;

                .text_13 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_14 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_7 {
                width: 476rpx;
                margin-top: 12rpx;

                .text_15 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_16 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_8 {
                width: 298rpx;
                margin: 12rpx 178rpx 0 0;

                .text_17 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_18 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }

            .text-wrapper_9 {
                width: 158rpx;
                margin: 12rpx 318rpx 0 0;

                .text_19 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                }

                .text_20 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                }
            }
        }
    }

    .section_4 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        margin-top: 16rpx;
        padding: 24rpx 208rpx 24rpx 32rpx;

        .image-text_1 {
            width: 510rpx;

            .label_1 {
                width: 92rpx;
                height: 92rpx;
            }

            .text-group_1 {
                margin: 4rpx 0 4rpx 0;

                .text_21 {
                    overflow-wrap: break-word;
                    color: rgba(51, 51, 51, 1);
                    font-size: 28rpx;
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin-right: 226rpx;
                }

                .text_22 {
                    overflow-wrap: break-word;
                    color: rgba(102, 102, 102, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin-top: 4rpx;
                }
            }
        }
    }

    .section_5 {
        background-color: rgba(255, 255, 255, 1);
        padding: 32rpx 32rpx 68rpx 0;

        .group_1 {
            width: 144rpx;
            margin-right: 574rpx;

            .box_3 {
                background-color: rgba(39, 118, 255, 1);
                width: 8rpx;
                height: 24rpx;
                margin: 8rpx 0 8rpx 0;
            }

            .text_23 {
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 28rpx;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
            }
        }

        .text-wrapper_10 {
            margin: 16rpx 0 0 32rpx;

            .text_24 {
                width: 686rpx;
                min-height: 600rpx;
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 28rpx;
                font-weight: normal;
                text-align: justify;
                line-height: 40rpx;
            }
        }

        .group_2 {
            width: 228rpx;
            margin: 32rpx 490rpx 0 0;

            .box_4 {
                background-color: rgba(39, 118, 255, 1);
                width: 8rpx;
                height: 24rpx;
                margin: 8rpx 0 8rpx 0;
            }

            .text_25 {
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 28rpx;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
            }
        }

        .text-wrapper_11 {
            margin: 16rpx 0 0 32rpx;

            .text_26 {
                width: 686rpx;
                min-height: 600rpx;
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 28rpx;
                font-weight: normal;
                text-align: justify;
                line-height: 40rpx;
            }
        }

        .group_3 {
            width: 144rpx;
            margin: 32rpx 574rpx 0 0;

            .box_5 {
                background-color: rgba(39, 118, 255, 1);
                width: 8rpx;
                height: 24rpx;
                margin: 8rpx 0 8rpx 0;
            }

            .text_27 {
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 28rpx;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
            }
        }

        .text-wrapper_12 {
            margin: 16rpx 0 0 32rpx;

            .text_28 {
                width: 686rpx;
                min-height: 600rpx;
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 28rpx;
                font-weight: normal;
                text-align: justify;
                line-height: 40rpx;
            }
        }
    }

    .section_6 {
        background-color: rgba(255, 255, 255, 1);
        margin-top: 16rpx;
        padding: 24rpx 32rpx 74rpx 32rpx;

        .text_29 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 32rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 52rpx;
            margin-right: 558rpx;
        }

        .text-wrapper_13 {
            box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
            background-color: rgba(255, 255, 255, 1);
            margin-top: 32rpx;
            padding: 24rpx;

            .text_30 {
                overflow-wrap: break-word;
                font-size: 32rpx;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 52rpx;
            }
        }

        .box_6 {
            background-color: rgba(255, 255, 255, 1);
            padding: 38rpx 0 38rpx 0;

            .text-wrapper_14 {
                width: 686rpx;

                .text_31 {
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 1);
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 52rpx;
                }

                .text_32 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin-top: 12rpx;
                }
            }

            .text-wrapper_15 {
                background-color: rgba(248, 249, 251, 1);
                border-radius: 8px;
                margin-top: 24rpx;
                padding: 24rpx;

                .text_33 {
                    overflow-wrap: break-word;
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 44rpx;
                }
            }
        }
    }

    .section_7 {
        background-color: rgba(255, 255, 255, 1);
        margin-top: 24rpx;
        padding: 26rpx 32rpx 18rpx 32rpx;

        .block_1 {
            .box_7 {
                background-color: rgba(255, 255, 255, 1);
                border-radius: 6px;
                border: 1px solid rgba(230, 235, 241, 1);
                padding: 20rpx 22rpx 20rpx 22rpx;

                .image-text_2 {
                    width: 116rpx;

                    .thumbnail_5 {
                        width: 40rpx;
                        height: 40rpx;
                        margin: 4rpx 0 4rpx 0;
                    }

                    .text-group_2 {
                        overflow-wrap: break-word;
                        color: rgba(38, 38, 38, 1);
                        font-size: 34rpx;
                        font-weight: normal;
                        text-align: right;
                        white-space: nowrap;
                        line-height: 48rpx;
                    }
                }
            }

            .text-wrapper_16 {
                background-color: rgba(255, 255, 255, 1);
                border-radius: 6px;
                border: 1px solid rgba(39, 118, 255, 1);
                margin-left: 24rpx;
                padding: 22rpx 48rpx 18rpx 48rpx;
                flex: 1;

                .text_34 {
                    overflow-wrap: break-word;
                    color: rgba(39, 118, 255, 1);
                    font-size: 34rpx;
                    font-family: PingFangSC-Medium;
                    font-weight: 500;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 48rpx;
                }
            }

            .text-wrapper_17 {
                background-color: rgba(39, 118, 255, 1);
                border-radius: 6px;
                margin-left: 26rpx;
                padding: 24rpx 50rpx 20rpx 50rpx;
                flex: 1;

                .text_35 {
                    overflow-wrap: break-word;
                    color: rgba(255, 255, 255, 1);
                    font-size: 34rpx;
                    font-family: PingFangSC-Medium;
                    font-weight: 500;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 48rpx;
                }
            }
        }

        .image-wrapper_1 {
            width: 268rpx;
            align-self: center;
            margin-top: 66rpx;

            .image_2 {
                width: 268rpx;
                height: 10rpx;
            }
        }
    }
}
</style>
